<template>
  <div>
    <heads />
    <Main :type="'form'">
      <el-row>
        <el-col :span="24">
          <el-form ref="form" label-width="170px" :model="form" :rules="form">
            <Title :title="'申请设置'"></Title>
            <el-form-item
              label="申请页面顶图"
              prop="pic"
              :rules="{
                required: true,
                message: '请选择图片',
                trigger: 'blur'
              }"
            >
              <div>
                <div v-if="form.pic">
                  <img
                    :src="
                      $store.state.qiniu + form.pic + $store.state.imgRotate
                    "
                    width="120px"
                  />
                </div>
                <el-button type="primary" @click="showImages = true"
                  >选择图片</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="申请条件">
              <el-checkbox-group v-model="form.checkList">
                <el-checkbox :label="1">验证手机号</el-checkbox><br />
                <!-- <el-checkbox :label="2">指定用户</el-checkbox><br /> -->
                <el-checkbox :label="3"
                  >购买指定商品&nbsp;&nbsp;
                  <el-button
                    size="small"
                    type="primary"
                    :disabled="!form.checkList.includes(3)"
                    @click="visible = 'shop'"
                    >选择商品</el-button
                  > </el-checkbox
                ><br />
                <div class="exclusiveShopBox">
                  <div
                    v-for="(item, index) in form.goods_ids"
                    :key="index"
                    class="exclusiveshopbox-chlid"
                  >
                    <div class="exclusiveshopbox-chlid-img">
                      <img
                        :src="
                          $store.state.qiniu +
                            item.goods_cover.split(',')[0] +
                            $store.state.imgRotate
                        "
                        width="100%"
                        height="100%"
                      />
                    </div>
                    <div class="exclusiveshopbox-chlid-font">
                      <div
                        class="one"
                        style="line-height: 44px;font-size:14px;"
                      >
                        <span>{{ item.goods_name }}</span>
                      </div>
                      <div class="two">
                        <span v-if="item.low_goods_price == item.up_goods_price"
                          >￥{{ item.low_goods_price }}</span
                        >
                        <span v-else
                          >￥{{ item.low_goods_price }} - ￥{{
                            item.up_goods_price
                          }}</span
                        >
                      </div>
                    </div>
                    <div class="exclusiveshopbox-chlid-del">
                      <i
                        class="el-icon-error"
                        style="color:#C0C4CC;font-size:20px;"
                        @click="excluDel(index)"
                      ></i>
                    </div>
                  </div>
                </div>
                <el-checkbox :label="4"
                  >邀请粉丝数&nbsp;&nbsp;
                  <el-input-number
                    v-model="form.fans"
                    :min="1"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    size="medium"
                    label="描述文字"
                    :disabled="!form.checkList.includes(4)"
                  ></el-input-number
                  >&nbsp;&nbsp;人
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="自动结算至零钱">
              <el-switch
                v-model="form.auto_settlement"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
              {{ form.auto_settlement ? "已开启" : "已关闭" }}
              <span class="add-info"
                >启用前需确认商家微信支可以企业支付零钱的能力</span
              >
            </el-form-item>
            <el-form-item label="手动结算，申请提现">
              <el-switch
                v-model="form.hand_settlement"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
              {{ form.hand_settlement ? "已开启" : "已关闭" }}
              <span class="add-info"
                >启用前需确认商家微信支可以企业支付零钱的能力</span
              >
            </el-form-item>
            <Title :title="'提现设置'"></Title>
            <el-form-item label="单笔提现">
              <el-form-item
                label="金额不低于"
                prop="cash_limitDown"
                :rules="{
                  required: true,
                  message: '请输入金额',
                  trigger: 'blur'
                }"
                style="float:left;margin-right:10px;"
                label-width="100px"
              >
                <el-input-number
                  v-model="form.cash_limitDown"
                  :min="0"
                  :max="100"
                  :precision="0"
                  :step="1"
                  :controls="false"
                  size="medium"
                  label="描述文字"
                ></el-input-number
                >&nbsp;元
              </el-form-item>
              <el-form-item
                label="不高于"
                prop="cash_limitUp"
                :rules="{
                  required: true,
                  message: '请输入金额',
                  trigger: 'blur'
                }"
                style="float:left;margin-right:10px;"
                label-width="70px"
              >
                <el-input-number
                  v-model="form.cash_limitUp"
                  :min="0"
                  :max="100"
                  :precision="0"
                  :step="1"
                  :controls="false"
                  size="medium"
                  label="描述文字"
                ></el-input-number
                >&nbsp;元
              </el-form-item>

              <span class="add-info"
                >微信企业付款单笔最低1元，单笔单日最高2W元（微信现金红包单次申请最多200元）</span
              >
            </el-form-item>
            <el-form-item label="提现频次">
              <el-form-item style="float:left;margin-right:10px;">
                <el-select
                  v-model="form.cash_frequency_type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="可申请提现"
                prop="cash_frequence_nums"
                :rules="{
                  required: true,
                  message: '请输入次数',
                  trigger: 'blur'
                }"
                style="float:left;"
                label-width="100px"
              >
                <el-input-number
                  v-model="form.cash_frequence_nums"
                  :min="0"
                  :max="100"
                  :precision="0"
                  :step="1"
                  :controls="false"
                  size="medium"
                  label="描述文字"
                ></el-input-number
                >&nbsp;次
              </el-form-item>
            </el-form-item>
            <el-form-item
              label="打款说明"
              prop="cash_explain"
              :rules="{
                required: true,
                message: '请输入打款说明',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="form.cash_explain"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                placeholder="请输入内容"
                style="width:40%;"
                size="medium"
                maxlength="40"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <Footer>
        <el-button type="primary" @click="submit">保 存</el-button>
      </Footer>
    </Main>

    <images
      :dialog-images="showImages"
      :use-btn="true"
      :use-type="'img'"
      @close="close"
    />
    <shop :visible="visible === 'shop'" @outDialog="outDialog" />
  </div>
</template>
<script>
import { DISTRIBUTESETTING } from "../service";

export default {
  components: {
    images: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate"),
    shop: () => import("./shop"),
    heads: () => import("./component/heads")
  },
  data() {
    return {
      showImages: false,
      form: {
        pic: "",
        checkList: [],
        fans: 0,
        goods_ids: [],
        auto_settlement: false,
        hand_settlement: false,
        cash_limitDown: 0,
        cash_limitUp: 0,
        cash_frequency_type: 1,
        cash_frequence_nums: 0,
        cash_explain: ""
      },
      visible: "",
      options: [
        { label: "每日", value: 1 },
        { label: "每周", value: 2 },
        { label: "每月", value: 3 }
      ]
    };
  },
  watch: {
    "form.auto_settlement"(v) {
      if (!v) {
        this.form.hand_settlement = true;
      }
    },
    "form.hand_settlement"(v) {
      if (!v) {
        this.form.auto_settlement = true;
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    close(file) {
      if (file) {
        this.form.pic = file.file_path;
      }
      this.showImages = false;
    },
    outDialog(v) {
      if (v) {
        this.form.goods_ids = [...this.form.goods_ids, ...v];
        this.form.goods_ids = this.form.goods_ids.map(ele => {
          ele = JSON.stringify(ele);
          return ele;
        });
        this.form.goods_ids = Array.from(new Set(this.form.goods_ids));
        this.form.goods_ids = this.form.goods_ids.map(ele => {
          ele = JSON.parse(ele);
          return ele;
        });
      }
      this.visible = "";
    },

    excluDel(i) {
      this.form.goods_ids.splice(i, 1);
    },
    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          let arr = [];
          if (this.form.goods_ids.length > 0) {
            this.form.goods_ids.forEach(ele => {
              arr.push(ele.goods_id);
            });
          }
          DISTRIBUTESETTING({
            flag: "save",
            pic: this.form.pic,
            is_phone: this.form.checkList.includes(1) ? 1 : 0,
            is_goods: this.form.checkList.includes(3) ? 1 : 0,
            goods_ids: arr.join(","),
            is_fans: this.form.checkList.includes(4) ? 1 : 0,
            fans: this.form.fans,
            auto_settlement: this.form.auto_settlement ? 1 : 0,
            hand_settlement: this.form.hand_settlement ? 1 : 0,
            cash_limit: this.form.cash_limitDown + "," + this.form.cash_limitUp,
            cash_frequency_type: this.form.cash_frequency_type,
            cash_frequence_nums: this.form.cash_frequence_nums,
            cash_explain: this.form.cash_explain
          }).then(({ code, msg }) => {
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          return false;
        }
      });
    },
    async getData() {
      await DISTRIBUTESETTING().then(({ code, data }) => {
        if (code === 200) {
          if (data.length <= 0) return;
          this.form.pic = data.pic;
          this.form.fans = data.fans;
          if (data.is_phone === 1) this.form.checkList.push(1);
          if (data.is_goods === 1) this.form.checkList.push(3);
          if (data.is_fans === 1) this.form.checkList.push(4);
          this.form.goods_ids = data.goods || [];
          this.form.auto_settlement = data.auto_settlement === 1;
          this.form.hand_settlement = data.hand_settlement === 1;
          this.form.cash_limitDown = data.cash_limit.split(",")[0];
          this.form.cash_limitUp = data.cash_limit.split(",")[1];
          this.form.cash_frequency_type = data.cash_frequency_type;
          this.form.cash_frequence_nums = data.cash_frequence_nums;
          this.form.cash_explain = data.cash_explain;
          this.form.fans = data.fans;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.exclusiveShopBox {
  width: 80%;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  .exclusiveshopbox-chlid {
    width: 37%;
    height: 90px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    margin: 10px 10px 0 0;
    padding: 10px 0 0 10px;
    .exclusiveshopbox-chlid-img {
      width: 70px;
      height: 70px;
      overflow: hidden;
      border-radius: 10px;
      float: left;
    }
    .exclusiveshopbox-chlid-font {
      width: 50%;
      height: 70px;
      float: left;
      margin-left: 10px;
      overflow: hidden;
      .one {
        width: 100%;
        height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .two {
        font-size: 12px;
        width: 100%;
        height: 26px;
        line-height: 26px;
        color: #ff2525;
      }
    }
    .exclusiveshopbox-chlid-del {
      float: right;
      width: 32px;
      height: 70px;
      line-height: 70px;
    }
  }
}
</style>
